<template>
  <div>
    <a-select 
      showSearch
      v-model="selectedValue"
      @change="handleChange"
      allowClear
      :placeholder="placeholder"
      :filterOption="filterOption"
    >
      <a-select-option v-for="item in data" :key="item.key" >{{item.label}}</a-select-option>
    </a-select>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  created() {
    this.fetch()
  },
  watch: {
    value: function() {
      this.selectedValue = this.value
    }
  },
  props: {
    value: { type: [String] },
    placeholder: { type: [String], default:''},
  },
  data() {
    return {
      selectedValue: this.value,
      data: [],
    }
  },
  methods: {
    fetch () {
      axios({
        url: '/infra/role/getPendingRole',
        method: 'get',
      }).then((res) => {
        this.data = res.data
      })
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    handleChange(val) {
      // Should provide an event to pass value to Form.
      this.$emit('change', val);
    },
  }
}
</script>
